<template>
  <div class="app-container">
    <el-row>
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="数据名称">
          <el-select v-model="form.dataName">
            <el-option v-for="item in option" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" @click="downloadFile">下载数据模板</el-link>
        </el-form-item>
        <el-form-item>
          <span>一、请选择需要导入的Excel文件；</span>
        </el-form-item>
        <el-form-item>
          <span>二、请按照数据模板的格式准备要导入的数据；</span>
        </el-form-item>
        <el-form-item>
          <span>三、表格中<span style="color: red">红色标题</span>为必填项；</span>
        </el-form-item>
        <el-form-item>
          <span>四、请认真阅读Excle模板文件中的注意事项。</span>
        </el-form-item>
        <el-form-item prop="file">
          <file-upload :fileType="['xls', 'xlsx']" :limit="1" ref="uploadRef"
            @uploadSuccess="uploadSuccess"></file-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { saveFile } from '@/api/screenData/index'
const { proxy } = getCurrentInstance()
const form = ref({
  dataName: '大屏首页历史数据模板'
})
const rules = {
  file: { required: true, message: '请先上传文件!', trigger: 'change' }
}
const option = [
  { name: '预评估大屏首页历史数据', value: '大屏首页历史数据模板' }
]
// 下载数据模板
const downloadFile = () => {
  proxy.download("/base/product/downloadTemplateExcel", {
    fileName: form.value.dataName + '.xls'
  }, form.value.dataName + '.xls');
}
// 选择文件
const uploadRef = ref()
const uploadSuccess = () => {
  proxy.$refs.formRef.clearValidate('file')
}
// 保存
const save = () => {
  form.value.file = uploadRef.value.fileList[0] && uploadRef.value.fileList[0].attachId
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      saveFile(uploadRef.value.fileList[0].attachId).then(res => {
        if (res.code === 200) {
          ElMessage({
            message: res.data,
            dangerouslyUseHTMLString: true,
            type: 'success'
          })
        }
      })
    }
  })
}
</script>
<style scoped>
.app-container {
  height: 100%;
  min-height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>